<template>
  <view class="count">
    <view class="count-info" @click="handleInfo">
      <uv-avatar :src="userInfo.avatar" size="106rpx" />
      <view class="count-center">
        <view class="operator">{{ userInfo.createBy }}</view>
        <view class="post-tag">{{ userInfo.post }}</view>
      </view>
      <uv-icon
        name="arrow-right"
        color="#757575"
        :label="userInfo.month"
        label-pos="left"
        label-color="#757575"
      />
    </view>
    <uv-collapse :border="false" accordion>
      <uv-collapse-item
        :border="false"
        v-for="(i, k) in checkList"
        :key="k"
        :title="i.title"
        :value="i.value"
        :name="'collapse' + k"
      >
        <view class="table-item" v-for="(d, j) in i.children" :key="j">
          <view>{{ d.date }}{{ d.week }}</view>
          <view>{{ d.time }}</view>
        </view>
        <uv-empty v-if="i.children.length == 0" :icon="empty" />
      </uv-collapse-item>
    </uv-collapse>
  </view>
</template>
<script setup>
import { onMounted, ref } from "vue";
import empty from "@/static/collect-empty.png";

const userInfo = ref({
  id: 1,
  createBy: "张三同学",
  post: "销售经理",
  avatar: "https://cdn.uviewui.com/uview/album/1.jpg",
  month: "2024-03-01",
}); // 用户信息
const checkList = ref([
  { title: "出勤天数", value: "21天", children: [] },
  { title: "平均工时", value: "8小时", children: [] },
  { title: "正常天数", value: "20天", children: [] },
  { title: "休息天数", value: "9天", children: [] },
  {
    title: "迟到",
    value: "3次",
    children: [
      { date: "2024-03-04", week: "星期一", time: "1小时" },
      { date: "2024-03-04", week: "星期一", time: "1小时" },
      { date: "2024-03-04", week: "星期一", time: "1小时" },
    ],
  },
  { title: "早退", value: "0次", children: [] },
  { title: "缺卡", value: "0次", children: [] },
  { title: "出差", value: "0次", children: [] },
  { title: "请假", value: "0次", children: [] },
]);

onMounted(() => {
  uni.setNavigationBarTitle({ title: "考勤统计" });
});

// 跳转个人信息页面
const handleInfo = () => {
  uni.navigateTo({ url: "/pages/user/myInfo" });
};
</script>
<style lang="scss" scoped>
.count {
  background-color: #fff;
  padding: 40rpx;
  box-sizing: border-box;
  .count-info {
    padding: 40rpx 22rpx;
    background: #fff;
    box-shadow: 0 0 20rpx 2rpx rgba(33, 33, 33, 0.16);
    border-radius: 20rpx;
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    &:active {
      background: #fafafa;
    }
    .count-center {
      flex: 1;
      width: 300rpx;
      margin-left: 22rpx;
      .operator {
        font-size: 36rpx;
        color: #212121;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .post-tag {
        min-width: 130rpx;
        font-size: 24rpx;
        color: #757575;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  .table-item {
    display: flex;
    align-items: center;
    padding: 20rpx;
    border-bottom: 2rpx solid #dedede;
    justify-content: space-between;
    &:last-child {
      border-bottom: none;
    }
  }
}
:deep(.uv-collapse-item) {
  // min-height: 100rpx;
  background: #ffffff;
  box-shadow: 0 0 20rpx 2rpx rgba(33, 33, 33, 0.16);
  border-radius: 20rpx;
  margin-bottom: 20rpx;
}
</style>
